<template>
  <div class="app-container">
    <h1>物资维修记录</h1>
    <el-table :data="displayedRecords" style="width: 100%" @row-click="handleRowClick">
      <!-- 移除物资ID列 -->
      <!-- <el-table-column prop="materialId" label="物资ID"></el-table-column> -->
      <el-table-column prop="materialName" label="物资名称"></el-table-column>
      <el-table-column label="维修日期" width="155">
        <template slot-scope="scope">
          {{ formatDate(scope.row.maintenanceDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="performedBy" label="执行人"></el-table-column>
      <el-table-column prop="remarks" label="备注"></el-table-column>
      <el-table-column label="创建时间" width="155">
        <template slot-scope="scope">
          {{ formatDate(scope.row.createdAt) }}
        </template>
      </el-table-column>
      <el-table-column prop="quantity" label="数量"></el-table-column>
      <el-table-column prop="maintenanceType" label="维修类型"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column fixed="right" label="操作" width="160">
        <template slot-scope="scope">
          <el-button type="success" size="small" @click.stop="confirmCompleteMaintenance(scope.row)">完成</el-button>
          <!-- 添加删除按钮，仅当状态为已完成时显示 -->
          <el-button v-if="scope.row.status === '已完成'" type="danger" size="small"
            @click.stop="confirmDeleteRecord(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  data() {
    return {
      materialId: ''
    };
  },
  computed: {
    ...mapState('maintenance', ['maintenanceRecords', 'allMaintenanceRecords', 'loading', 'error']),
    displayedRecords() {
      return this.materialId ? this.maintenanceRecords : this.allMaintenanceRecords;
    }
  },
  methods: {
    formatDate(dateString) {
      if (!dateString) return ''; // 如果没有时间字符串，返回空字符串
      const date = new Date(dateString);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
    },
    handleRowClick(row) {
      console.log(`Clicked on row with material ID: ${row.materialId}`);
    },
    ...mapActions('maintenance', ['completeMaintenance', 'fetchAllMaintenanceRecords', 'deleteMaintenanceRecord', 'fetchMaintenanceRecords']),
    fetchData() {
      this.fetchAllMaintenanceRecords();
    },
    confirmCompleteMaintenance(row) {
      this.$confirm('此操作将标记维修为已完成，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户确认后调用 completeMaintenance 方法
        this.completeMaintenance(row).then(success => {
          if (success) {
            this.$message({
              type: 'success',
              message: '维修记录已成功标记为已完成!'
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    confirmDeleteRecord(row) {
      this.$confirm('此操作将永久删除该维修记录，是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        // 用户确认后调用 deleteMaintenanceRecord 方法
        this.deleteMaintenanceRecord(row.id).then(success => {
          if (success) {
            this.$message({
              type: 'success',
              message: '维修记录已成功删除!'
            });
            // 刷新数据列表
            this.fetchData();
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  created() {
    this.fetchData();
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f3f4f6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  color: #303133;
  margin-bottom: 20px;
}

.el-table {
  width: 90%;
  max-width: 1200px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.el-table .cell {
  text-align: center;
}

.el-button--success {
  background-color: #67c23a;
  border-color: #67c23a;
}

.el-button--success:hover {
  background-color: #5daf34;
  border-color: #5daf34;
}
</style>